﻿<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery炫酷鼠标滑过图片显示遮罩层特效</title>

<!--可无视-->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href='https://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/base.css" />

<!--必要样式-->
<link rel="stylesheet" href="css/style.css" />

<!--[if IE]>
	<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>

<div id="main">
	<div class="container">
		
		<nav>
			<ul>
				<li><a href="index.html">Slide In Bottom</a></li>
				<li><a href="index2.html">Slide In Top</a></li>
				<li><a href="index3.html">Slide In Left</a></li>
				<li><a href="index4.html">Slide In Right</a></li>
				<li><a href="index5.html">Icon Border Animate</a></li>
				<li><a href="index6.html" class="active">Icon Slide In</a></li>
			</ul>
		</nav><!-- /nav -->

		<div id="effect-6" class="effects clearfix">
            <div class="img">
                <img src="img/jpg/4.jpg" alt="">
                <div class="overlay">
                    <a href="#" class="expand">+</a>
                    <a class="close-overlay">x</a>
                </div>
            </div>
            <div class="img">
                <img src="img/jpg/4.jpg" alt="">
                <div class="overlay">
                    <a class="close-overlay">x</a>

                    <div><a href="#">&infin;</a></div>
                    <div><a href="#">&infin;</a></div>
                    <div><a href="#">&infin;</a></div>
                </div>
            </div>
            <div class="img">
                <img src="img/jpg/4.jpg" alt="">
                <div class="overlay">
                    <a href="#" class="expand">+</a>
                    <a class="close-overlay">x</a>
                </div>
            </div>
			<div class="img">
				<img src="img/jpg/4.jpg" alt="">
				<div class="overlay">
					<a href="#" class="expand">+</a>
					<a class="close-overlay">x</a>
				</div>
			</div>
            <div class="img">
                <img src="img/jpg/4.jpg" alt="">
                <div class="overlay">
                    <a href="#" class="expand">+</a>
                    <a class="close-overlay">x</a>
                </div>
            </div>
            <div class="img">
                <img src="img/jpg/4.jpg" alt="">
                <div class="overlay">
                    <a href="#" class="expand">+</a>
                    <a class="close-overlay">x</a>
                </div>
            </div>
            <div class="img">
                <img src="img/jpg/4.jpg" alt="">
                <div class="overlay">
                    <a href="#" class="expand">+</a>
                    <a class="close-overlay">x</a>
                </div>
            </div>
            <div class="img">
                <img src="img/jpg/4.jpg" alt="">
                <div class="overlay">
                    <a href="#" class="expand">+</a>
                    <a class="close-overlay">x</a>
                </div>
            </div>
            <div class="img">
                <img src="img/jpg/4.jpg" alt="">
                <div class="overlay">
                    <a href="#" class="expand">+</a>
                    <a class="close-overlay">x</a>
                </div>
            </div>

		</div>

	</div><!-- /.container -->
</div>
	
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	if (Modernizr.touch) {
		// show the close overlay button
		$(".close-overlay").removeClass("hidden");
		// handle the adding of hover class when clicked
		$(".img").click(function(e){
			if (!$(this).hasClass("hover")) {
				$(this).addClass("hover");
			}
		});
		// handle the closing of the overlay
		$(".close-overlay").click(function(e){
			e.preventDefault();
			e.stopPropagation();
			if ($(this).closest(".img").hasClass("hover")) {
				$(this).closest(".img").removeClass("hover");
			}
		});
	} else {
		// handle the mouseenter functionality
		$(".img").mouseenter(function(){
			$(this).addClass("hover");
		})
		// handle the mouseleave functionality
		.mouseleave(function(){
			$(this).removeClass("hover");
		});
	}
});
</script>

</body>
</html>